
<!-- /* Copyright 2016-2017, Huawei Technologies Co., Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 -->

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/VMMain.css" rel="stylesheet" />
    <link href="css/bootstrap-table.min.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/rest.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"> </script>
    <link href="css/jquery-ui-1.12.1.min.css" rel="stylesheet" />


    <script src="js/topo/sigma/sigma.min.js"></script>
    <script src="js/topo/sigma/sigma.renderers.edgeLabels.min.js"></script>


    <style>
        body {
            overflow: hidden;
        }
        .panel-heading:hover {
            border: 1px solid #4ac9ff;
            color: #4ac9ff;
        }
        li:hover {
            cursor: pointer;
            color: #4ac9ff;
        }
        body {
            margin: 15px;
        }
        #accordion .glyphicon {
            margin-right: 10px;
        }
        .panel-collapse>.list-group .list-group-item:first-child {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }
        .panel-collapse>.list-group .list-group-item {
            border-width: 1px 0;
        }
        .panel-collapse>.list-group {
            margin-bottom: 0;
        }
        .panel-collapse .list-group-item {
            border-radius: 0;
        }
        .panel-collapse .list-group .list-group {
            margin: 0;
            margin-top: 10px;
        }
        .panel-collapse .list-group-item li.list-group-item {
            margin: 0 -15px;
            border-top: 1px solid #ddd !important;
            border-bottom: 0;
            padding-left: 30px;
        }
        .panel-collapse .list-group-item li.list-group-item:last-child {
            padding-bottom: 0;
        }
        .panel-collapse div.list-group div.list-group {
            margin: 0;
        }
        .panel-collapse div.list-group .list-group a.list-group-item {
            border-top: 1px solid #ddd !important;
            border-bottom: 0;
            padding-left: 30px;
        }
        .panel-collapse .list-group-item li.list-group-item {
            border-top: 1px solid #DDD !important;
        }
    </style>
    <script>

        $(function () {
            var serviceId = getQueryStringValue("serviceId");
            console.log("TOPO - serviceId : "+ serviceId);

           

            $('#container').highcharts({
                chart: {
                    backgroundColor: 'rgb(250,250,250)',
                    events: {
                        load: function () {


                            var ren = this.renderer,
                                    colors = Highcharts.getOptions().colors,
                                    rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
                                    leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];


                            ren.label('vCpe Name', 10, 82)
                                    .attr({
                                        fill: colors[0],
                                        stroke: 'white',
                                        'stroke-width': 2,
                                        padding: 5,
                                        r: 5
                                    })
                                    .css({
                                        color: 'white'
                                    })
                                    .add()
                                    .shadow(true);


                            ren.path(rightArrow)
                                    .attr({
                                        'stroke-width': 1,
                                        stroke: colors[1]
                                    })
                                    .translate(95, 95)
                                    .add();

                            ren.label('', 50, 75)
                                    .css({
                                        fontSize: '10px',
                                        color: colors[3]
                                    })
                                    .add();



                            ren.label('Site Name', 210, 82)
                                    .attr({
                                        fill: colors[0],
                                        stroke: 'white',
                                        'stroke-width': 2,
                                        padding: 5,
                                        r: 5
                                    })
                                    .css({
                                        color: 'white'
                                    })
                                    .add()
                                    .shadow(true);


                            ren.label('DC Name', 420, 82)
                                    .attr({
                                        fill: colors[0],
                                        stroke: 'white',
                                        'stroke-width': 2,
                                        padding: 5,
                                        r: 5
                                    })
                                    .css({
                                        color: 'white'
                                    })
                                    .add()
                                    .shadow(true);

                            ren.label('VPC', 620, 82)
                                    .attr({
                                        fill: colors[0],
                                        stroke: 'white',
                                        'stroke-width': 2,
                                        padding: 5,
                                        r: 5
                                    })
                                    .css({
                                        color: 'white'
                                    })
                                    .add()
                                    .shadow(true);



                            ren.path(rightArrow)
                                    .attr({
                                        'stroke-width': 1,
                                        stroke: colors[1]
                                    })
                                    .translate(300, 95)
                                    .add();

                            ren.path(rightArrow)
                                    .attr({
                                        'stroke-width': 1,
                                        stroke: colors[1]
                                    })
                                    .translate(500, 95)
                                    .add();


                        }
                    }
                },
                title: {
                    text: 'SDNO-TOPO',
                    style: {
                        color: 'black'
                    }
                }

            });
            function addAccordionData(paneltype, text){
                var content = '';
                content += '<div id="panel_'+paneltype+'" class="panel panel-default" onclick="acordClick(\''+paneltype+'\');"><div class="panel-heading">';
                content += '<h4 class="panel-title">';
                content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">';
                content += '<span id="sdnoLink">'+text+'</span></a>';
                content += '</h4></div>';
                content += '</div></div>';
                return content;
            }
            function getQueryStringValue (key) {
                var params = new URLSearchParams(window.location.search.slice(1));
                return params.get(key);
            }
        });
        function acordClick(panelType) {
            //TODO: Act according to the panelType. value may be sdno, gso or nfvo
            console.log(panelType + " Clicked");
        }
    </script>

    <style>
hr{
    margin:1px;
}
</style>
</head>


<body>
<div class="">
    <div class="row">
        <div class="col-sm-3" style="width:18%">
            <div class="panel-group" id="accordion">
            </div>
        </div>
        <div class="col-sm-3" id="dashboard" style="width:82%">
            <div id="container" style="width: 750px; height: 250px; margin: 0 auto; display: inline-block;"> </div>
        </div>
    </div>
</div>




</body>
</html>
